<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗RAG系统 - 调试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .debug-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #337ecc;
        }
        .test-button:disabled {
            background: #c0c4cc;
            cursor: not-allowed;
        }
        .log-area {
            background: #1e1e1e;
            color: #fff;
            padding: 15px;
            border-radius: 4px;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }
        .log-item {
            margin-bottom: 5px;
        }
        .log-info { color: #409eff; }
        .log-success { color: #67c23a; }
        .log-warning { color: #e6a23c; }
        .log-error { color: #f56c6c; }
        .input-group {
            margin: 10px 0;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .input-group input, .input-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>智慧医疗RAG系统 - 调试页面</h1>
    
    <div class="debug-section">
        <h2>基本功能测试</h2>
        <button class="test-button" onclick="testBasicClick()">测试基本点击</button>
        <button class="test-button" onclick="testConsole()">测试控制台输出</button>
        <button class="test-button" onclick="testLocalStorage()">测试本地存储</button>
        <button class="test-button" onclick="testNetwork()">测试网络请求</button>
    </div>

    <div class="debug-section">
        <h2>Vue组件测试</h2>
        <button class="test-button" onclick="testVueLoading()">测试Vue加载</button>
        <button class="test-button" onclick="testElementPlus()">测试Element Plus</button>
    </div>

    <div class="debug-section">
        <h2>模拟分诊测试</h2>
        <div class="input-group">
            <label>患者主诉:</label>
            <textarea id="patientComplaint" rows="3" placeholder="请输入患者主诉症状..."></textarea>
        </div>
        <div class="input-group">
            <label>收缩压:</label>
            <input type="number" id="systolic" placeholder="120">
        </div>
        <div class="input-group">
            <label>舒张压:</label>
            <input type="number" id="diastolic" placeholder="80">
        </div>
        <button class="test-button" onclick="testTriageRequest()">提交分诊请求</button>
    </div>

    <div class="debug-section">
        <h2>调试日志</h2>
        <div id="logArea" class="log-area"></div>
        <button class="test-button" onclick="clearLogs()">清空日志</button>
    </div>

    <script>
        // 日志系统
        function addLog(type, message) {
            const logArea = document.getElementById('logArea');
            const logItem = document.createElement('div');
            logItem.className = `log-item log-${type}`;
            logItem.innerHTML = `[${new Date().toLocaleTimeString()}] ${message}`;
            logArea.appendChild(logItem);
            logArea.scrollTop = logArea.scrollHeight;
        }

        function clearLogs() {
            document.getElementById('logArea').innerHTML = '';
        }

        // 基本功能测试
        function testBasicClick() {
            addLog('success', '基本点击测试成功');
            alert('基本点击功能正常！');
        }

        function testConsole() {
            console.log('控制台测试消息');
            console.warn('控制台警告消息');
            console.error('控制台错误消息');
            addLog('info', '控制台测试完成，请查看浏览器控制台');
        }

        function testLocalStorage() {
            try {
                localStorage.setItem('test', 'test-value');
                const value = localStorage.getItem('test');
                if (value === 'test-value') {
                    addLog('success', '本地存储测试成功');
                } else {
                    addLog('error', '本地存储测试失败');
                }
                localStorage.removeItem('test');
            } catch (error) {
                addLog('error', `本地存储测试失败: ${error.message}`);
            }
        }

        function testNetwork() {
            addLog('info', '开始网络请求测试...');
            fetch('https://httpbin.org/get')
                .then(response => response.json())
                .then(data => {
                    addLog('success', '网络请求测试成功');
                })
                .catch(error => {
                    addLog('error', `网络请求测试失败: ${error.message}`);
                });
        }

        function testVueLoading() {
            // 检查Vue是否可用
            if (typeof Vue !== 'undefined') {
                addLog('success', 'Vue已加载');
            } else {
                addLog('warning', 'Vue未加载或不可用');
            }
        }

        function testElementPlus() {
            // 检查Element Plus是否可用
            if (typeof ElementPlus !== 'undefined') {
                addLog('success', 'Element Plus已加载');
            } else {
                addLog('warning', 'Element Plus未加载或不可用');
            }
        }

        function testTriageRequest() {
            const complaint = document.getElementById('patientComplaint').value;
            const systolic = document.getElementById('systolic').value;
            const diastolic = document.getElementById('diastolic').value;

            if (!complaint.trim()) {
                addLog('warning', '请输入患者主诉症状');
                return;
            }

            addLog('info', '开始模拟分诊请求...');

            // 模拟API请求
            setTimeout(() => {
                const mockResult = {
                    department: '心血管内科',
                    priority: '急诊优先级',
                    suggestion: '建议立即就医，进行心电图检查',
                    references: [
                        {
                            type: '症状匹配',
                            source: '医学知识库',
                            content: '胸痛症状与心血管疾病高度相关',
                            relevance: 95,
                            updateTime: new Date().toLocaleString()
                        }
                    ]
                };

                addLog('success', '分诊请求成功');
                addLog('info', `建议科室: ${mockResult.department}`);
                addLog('info', `优先级: ${mockResult.priority}`);
                addLog('info', `建议: ${mockResult.suggestion}`);
            }, 1000);
        }

        // 页面加载时初始化
        window.onload = function() {
            addLog('info', '调试页面加载完成');
            addLog('info', `浏览器: ${navigator.userAgent}`);
            addLog('info', `页面URL: ${window.location.href}`);
        };
    </script>
</body>
</html> 